<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <%--    <link href="assets/css/custom.css" rel="stylesheet">--%>
    <link href="${pageContext.request.contextPath}/assets/css/lib/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/lib/bootstrap-responsive.min.css" rel="stylesheet">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/layout.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/managementLayout.css">
    <script src="${pageContext.request.contextPath}/js/jquery.js"></script>
    <script src="${pageContext.request.contextPath}/js/slider.js"></script>
    <script src="${pageContext.request.contextPath}/js/vue.js"></script>
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/images/favicon.ico">
    <link rel="apple-touch-icon" href="${pageContext.request.contextPath}/images/apple-touch-icon.png">
    <%--    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">--%>
    <%--    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">--%>
    <!--ztree核心的样式文件-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/ztree/css/zTreeStyle/zTreeStyle.css"/>
    <!--ztree核心js文件-->
    <script type="text/javascript" src="${pageContext.request.contextPath}/ztree/js/jquery.ztree.core.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/ztree/js/jquery.ztree.excheck.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap.js"></script>
    <script src="${pageContext.request.contextPath}/js/vue.js"></script>
    <script src="${pageContext.request.contextPath}/js/axios.min.js"></script>
    <title>打牛蛙组后台权限管理系统-子商户角色新增</title>

    <style>
        #regTable {
            padding-left: 30px;
        }

        #foot {
            text-align: center;
            margin: 0 0 30px 0;
        }

        #foot button {
            margin-right: 50px;
        }
    </style>
</head>

<body>


<div id="container">
    <section class="public-main">

        <div class="sidebar public-main-left" id="app">
            <ul class="sidebar-menu">
                <!-- <li class="header">主导航</li> -->
                <li class='sidebar-menu-header'>
                    <img src='./img/logo.png'/>
                    <span>后台管理系统</span>
                </li>
                <li class="treeview">
                    <a href="index.jsp">
                        <i class="fa fa-dashboard"></i> <span>主  页</span> <i class="fa fa-angle-right pull-right"></i>
                    </a>
                </li>
                <li class="header">后台管理</li>
                <c:forEach items="${RiOneList}" var="one">
                    <li class="treeview">
                        <a href="javascript:void(0)" @click.prevent="showRight(${thisAccount.userCode},${one.rightId})">
                            <i class="fa fa-dashboard"></i> <span>${one.rightName}</span>
                            <i class="fa fa-angle-right pull-right"></i>
                        </a>
                        <ul class="treeview-menu">
                            <li v-for="obj in riTwoList"><a href="#"><i class="fa fa-circle-o"></i>{{obj.rightName}}</a>
                            </li>
                        </ul>
                    </li>
                </c:forEach>
                <c:if test="${!empty RecOneList}">
                    <li class="header">前台管理</li>
                    <c:forEach items="${RecOneList}" var="RecOne">
                        <li class="treeview">
                            <a href="#">
                                <i class="fa fa-dashboard"></i> <span>${RecOne.rightName}</span>
                                <i class="fa fa-angle-right pull-right"></i>
                            </a>
                        </li>
                    </c:forEach>
                </c:if>
            </ul>
        </div>
        <!-- 主体部分 -->

        <div class="public-main-right">

            <header class="nav-wrapper">
                <div class="main-right-header">
                    <div class="location">
                        <strong>课程管理</strong>
                        <span>课程列表</span>
                    </div>
                    <div class='main-right-header-right'>
                            <span class="">
                                <span style="font-weight: bolder">${thisAccount.roleName}</span>：${thisAccount.realName}
                            </span>

                        <span class="">
                            <a href="${pageContext.request.contextPath}/index.jsp">
                                <c:if test="${thisAccount.head!=''}">
                                    <img src="img/head/${thisAccount.head}" style="width: 25px">
                                </c:if>
                                <c:if test="${thisAccount.head==''}">
                                    <img src="img/head/initial.jpg" style="width: 25px">
                                </c:if>
                            </a>
                        </span>
                        <c:if test="${thisAccount!=null}">
                            <span class=""><a
                                    href="${pageContext.request.contextPath}/loginContoller/returnLogin">退出登录</a></span>
                        </c:if>
                        <c:if test="${thisAccount==null}">
                            <span class=""><a href="${pageContext.request.contextPath}/loginContoller/returnLogin">未登录，快快点击登录吧~</a></span>
                        </c:if>
                    </div>

                </div>
            </header>

            <!-- 主体搜索及增加框 -->
            <div class='main-right-content'>
                <!-- 以下容器均可修改，原有id和class别动，否则样式会变 -->
                <div id="regTable">

                    <form id="regForm">
                        <fieldset>
                            <legend>新增子商户信息</legend>

                            <input type="hidden" name="superId" value="${thisAccount.roleId}">

                            <div class="control-group">
                                <label class="control-label" for="superId">主商户名称</label>
                                <div class="controls">
                                    <c:if test="${thisAccount.superId==0}">
                                    <select id="superId" name="superId" value="${thisAccount.roleId}"
                                            class="input-xlarge">
                                        </c:if>
                                        <c:if test="${thisAccount.superId==1}">
                                        <select id="superId" name="superId" value="${thisAccount.roleId}"
                                                class="input-xlarge" disabled>
                                            </c:if>1
                                            <option selected="selected" style="background: #9ea6b9" disabled>--请选择--
                                            </option>
                                            <c:forEach items="${showSuperRoleList}" var="superRoleList">
                                                <c:if test="${thisAccount.roleId==superRoleList.roleId}">
                                                    <option value="${superRoleList.roleId}"
                                                            selected="selected">${superRoleList.roleName}</option>
                                                </c:if>
                                                <c:if test="${thisAccount.roleId!=superRoleList.roleId}">
                                                    <option value="${superRoleList.roleId}">${superRoleList.roleName}</option>
                                                </c:if>
                                            </c:forEach>
                                        </select>
                                </div>
                            </div>

                            <div class="control-group">
                                <label class="control-label">子商户名称</label>
                                <div class="controls">
                                    <input id="textinput-0" name="roleName" type="text" class="input-xlarge"
                                           placeholder="请输入子商户名称">
                                </div>
                            </div>

                            <div class="control-group">
                                <label class="control-label" for="describe">子商户描述</label>
                                <div class="controls">
                                    <textarea id="describe" name="describe" style="width: 400px;height: 100px"
                                              placeholder="请输入子商户描述"></textarea>
                                </div>
                            </div>

                            <div class="control-group">
                                <label class="control-label">账号状态</label>
                                <div class="controls">
                                    <label class="radio inline">
                                        <input type="radio" name="roleStatus" value="1" checked="checked"/>启用
                                    </label>
                                    <label class="radio inline">
                                        <input type="radio" name="roleStatus" id="multipleradiosinline-0-1-1"
                                               value="2"/>禁用
                                    </label>
                                </div>
                            </div>

                            <!--菜单栏-->
                            <div class="control-group">
                                <label class="control-label">菜单权限</label>
                                <div class="controls">
                                    <%--树形菜单--%>
                                    <ul id="sampleTree" class="ztree" name="rightId"></ul>
                                </div>
                            </div>

                            <!--菜单栏-->
                            <div class="control-group">
                                <label class="control-label">操作权限</label>
                                <div class="controls">
                                    <ul id="sampleTreeDo" class="ztree" name="rightId"></ul>
                                </div>
                            </div>
                            <div id="foot">
                                <button type="button" class="btn btn-primary btn-default active"
                                        onclick="addRoleChilds()">提交
                                </button>
                                <a class="btn btn-default" href="/role.jsp" role="button">返回</a>
                            </div>
                        </fieldset>
                    </form>
                </div>
                <%--id="regTable"--%>
            </div>
            <%--class='main-right-content--%>

            <footer>
                打牛蛙组教育集团
                联系电话：8055-4312-1233
            </footer>
        </div>
    </section>
</div>

<!-- 每一页需加上slider，否则js动效无法显示 -->
<script src="js/slider.js"></script>
<!-- 每一页需加上slider，否则js动效无法显示 -->

<script type="text/javascript">

    //默认加载获取菜单栏
    $(function () {
        $("#superId option[value='" + $("#superId").val() + "']").attr("selected", true); //设置默认选中商户名称
        //1、获取树型菜单权限，默认选中某些节点
        <%--$.ajax({--%>
        <%--    url: "${pageContext.request.contextPath}/addBusinessController/findAllRights",--%>
        <%--    dataType: "json",--%>
        <%--    async: false,--%>
        <%--    success: function (data) {--%>
        <%--        console.log(data);--%>
        <%--        $.ajax({--%>
        <%--            url: "${pageContext.request.contextPath}/addBusinessController/findAccountRights",--%>
        <%--            dataType: "json",--%>
        <%--            async: false,--%>
        <%--            success: function (data2) {--%>
        <%--                var zTreeObj = $.fn.zTree.init($("#sampleTree"), settins, data); //初始化树--%>
        <%--                zTreeObj.expandAll(true);   //true 节点全部展开、false节点收缩--%>
        <%--                // var zTree = $.fn.zTree.getZTreeObj("sampleTree");--%>
        <%--                console.log('菜单权限=======', data2)--%>
        <%--                // var node = zTreeObj.getNodeByParam("rightId", 6);--%>
        <%--                // zTreeObj.checkNode(node, true, false);--%>
        <%--                $(data2).each(function (i, v) {--%>
        <%--                    //查询节点--%>
        <%--                    var node = zTreeObj.getNodeByParam("rightId", v.rightId);--%>
        <%--                    if (node != null) {--%>
        <%--                        //选中--%>
        <%--                        zTreeObj.checkNode(node, true, false);--%>
        <%--                    }--%>
        <%--                })--%>
        <%--            }--%>
        <%--        })--%>
        <%--    }--%>
        <%--})--%>
        <%--//2、获取树型操作权限，默认选中某些节点--%>
        <%--$.ajax({--%>
        <%--    url: "${pageContext.request.contextPath}/addBusinessController/findAllDoRights",--%>
        <%--    dataType: "json",--%>
        <%--    async: false,--%>
        <%--    success: function (data1) {--%>
        <%--        console.log(data1);--%>
        <%--        $.ajax({--%>
        <%--            url: "${pageContext.request.contextPath}/addBusinessController/findAccountDoRights",--%>
        <%--            dataType: "json",--%>
        <%--            async: false,--%>
        <%--            success: function (data3) {--%>
        <%--                var zTreeObj = $.fn.zTree.init($("#sampleTreeDo"), settins, data1); //初始化树--%>
        <%--                zTreeObj.expandAll(true);   //true 节点全部展开、false节点收缩--%>
        <%--                console.log('操作权限=======', data3)--%>
        <%--                $(data3).each(function (i, v) {--%>
        <%--                    //查询节点--%>
        <%--                    var node = zTreeObj.getNodeByParam("rightId", v.rightId);--%>
        <%--                    if (node != null) {--%>
        <%--                        //选中--%>
        <%--                        zTreeObj.checkNode(node, true, false);--%>
        <%--                    }--%>
        <%--                })--%>
        <%--            }--%>
        <%--        })--%>
        <%--    }--%>
        <%--})--%>

        //1、获取树型菜单权限，默认选中某些节点
        $.ajax({
            url: "${pageContext.request.contextPath}/addBusinessController/findAccountRights",
            dataType: "json",
            async: false,
            success: function (data) {
                console.log(data);
                var zTreeObj = $.fn.zTree.init($("#sampleTree"), settins, data); //初始化树
                zTreeObj.expandAll(true);   //true 节点全部展开、false节点收缩
            }
        })
        //2、获取树型操作权限，默认选中某些节点
        $.ajax({
            url: "${pageContext.request.contextPath}/addBusinessController/findAccountDoRights",
            dataType: "json",
            async: false,
            success: function (data1) {
                console.log(data1);
                var zTreeObj = $.fn.zTree.init($("#sampleTreeDo"), settins, data1); //初始化树
                zTreeObj.expandAll(true);   //true 节点全部展开、false节点收缩
            }
        })
    })

    function addRoleChilds() {

        //菜单权限
        var zTreeObj = $.fn.zTree.getZTreeObj("sampleTree");
        var nodes = zTreeObj.getCheckedNodes(true);
        var ids = [];
        for (var i = 0; i < nodes.length; i++) {
            ids.push(nodes[i].rightId);
        }
        //操作权限
        var zTreeObjDo = $.fn.zTree.getZTreeObj("sampleTreeDo");
        var nodesDo = zTreeObjDo.getCheckedNodes(true);
        for (var i = 0; i < nodesDo.length; i++) {
            ids.push(nodesDo[i].rightId);
        }
        // console.log(ids.join(','))
        console.log(ids.join(','));
        console.log("rights========", ids);
        console.log("$('#regForm').serialize()========", $("#regForm").serialize());

        var account = {};
        var data = $("#regForm").serialize().split("&");
        console.log("获取到的表单元素data====：", data);
        for (let i = 0; i < data.length; i++) {
            var params = data[i].split("=");
            account[params[0]] = params[1];
        }

        for(let item in  account){
            console.log(account[item],'item.........');
            if(item === 'superId' && account[item]==1){
                window.alert('主商户不能为空');
                return;
            }else if(item === 'roleName' && !account[item]){
                window.alert('子商户名称不能为空');
                return;
            }else if(item === 'describe' && !account[item]){
                window.alert('子商户描述不能为空');
                return;
            }
        }

        $.ajax({
            url: "${pageContext.request.contextPath}/addBusinessController/addBusinessRoleMsg",
            data: $("#regForm").serialize(),
            dataType: "json",
            success: function (data) {
                if ("1" == data) {
                    $.ajax({
                        url: "${pageContext.request.contextPath}/addBusinessController/addBusinessRights",
                        data: {"rights": "[" + ids + "]"},
                        dataType: "text",
                        success: function (data) {
                            if ("1" == data) {
                                alert("增加成功啦~小宝贝可以在当前页面查看哦~")
                                window.location.href = "http://localhost:8085/role.jsp";
                            } else {
                                alert("呜呜呜~只有基本信息增加成功啦，权限信息增加失败咯，麻烦您致电客服反馈吧~")
                            }
                        }
                    })

                } else {
                    alert("呜呜呜~基本信息都增加失败啦，麻烦您致电客服反馈吧~")
                }
            }
        })
    }

    /*
     * event:事件对象
     * treeId： 当前树的id属性值
     * treeNode： 当前树节点,通过当前节点可以获取所有的数据
     */
    function show(event, treeId, treeNode) {
        var id = treeNode.rightId;  //获取id的值
        var pId = treeNode.rightSuperId;  //获取pid的值
        var name = treeNode.rightName;  //获取name的值
        console.log(name);

    }

    /*
       *  树形控件生成多级菜单
       */
    // 定义节点数据，采用简单数据格式(Array格式或isSampleData)
    var settins = {
        view: {
            showLine: false,  //去掉节点之间的关联线
            selectedMulti: false //禁止选择多个节点
        },
        data: {
            key: {
                //显示的名称(和数据库相同)
                name: "rightName"
            },
            simpleData: {
                enable: true, //开启简单数据格式
                idKey: "rightId", //主键id
                pIdKey: "rightSuperId" //父节点
            }
        },
        check: {
            enable: true, //启用ckeck功能
            //Y:勾选后的情况；N:取消勾选后的情况；p：父节点联动；s：子节点联动；"ps"父子节点都联动；""父子节点都不联动，只选中本节点
            chkboxType: {"Y": "ps", "N": "ps"}
        },
        callback: {
            onCheck: onCheck
        }
    }

    function onCheck(e, treeId, treeNode) {
        var treeObj = $.fn.zTree.getZTreeObj("sampleTree"),
            nodes = treeObj.getCheckedNodes(true);
        for (var i = 0; i < nodes.length; i++) {
            console.log("节点id:" + nodes[i].rightId + " 节点名称:" + nodes[i].rightSuperId + "父节点：" + nodes[i].rightSuperId); //获取选中节点的值
        }
    }


    //菜单栏
    new Vue({
        el: "#app",
        data: {
            riTwoList: {}
        },
        methods: {
            showRight: function (id, superId) {
                var _this = this;
                axios.get("/account/showRightTwo", {
                    params: {
                        id: id,
                        superId: superId,
                    }
                })
                    .then(function (response) {
                        console.log(response.data)
                        _this.riTwoList = response.data
                    })
                    .catch(function (error) {
                        console.log(error)
                    })
            }
        }

    })

</script>
</body>

</html>